@extends('webadmin.index')

@section('title', '友情链接')
@show

@section('content')
<div class="mws-panel grid_8">
	<div class="mws-form-message error hide">
    	
    </div>
    <div class="mws-form-message success hide">
        
    </div>
  <div class="mws-panel-header">
    <span>
      <i class="icon-table"></i>友情链接</span>
  </div>

  <div class="mws-panel-body no-padding">
    <div role="grid" class="dataTables_wrapper" id="DataTables_Table_1_wrapper">
      <table class="mws-datatable-fn mws-table dataTable" id="DataTables_Table_1" aria-describedby="DataTables_Table_1_info">
        <thead>
          <tr role="row">
            <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" style="width: 160px;" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">ID</th>
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" style="width: 208px;" aria-label="Browser: activate to sort column ascending">友情链接</th>
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" style="width: 208px;" aria-label="Browser: activate to sort column ascending">链接地址</th>
            <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" style="width: 98px;" aria-label="CSS grade: activate to sort column ascending">操作</th></tr>
        </thead>
        <tbody role="alert" aria-live="polite" aria-relevant="all">

			@foreach($links as $k=>$v)
          	<tr class="@if($k%2 == 1) odd @else even @endif">
	            <td class=" ">{{$v->id}}</td>
	            <td class=" ">{{$v->name}}</td>
	            <td class=" ">{{$v->url}}</td>
	            <td class=" ">
	            	<a href="/admin/links/delete?id={{$v->id}}" class="btn btn-danger">删除</a>
	            </td>
            </tr>
          	@endforeach
        </tbody>
      </table>
      <div class="dataTables_info" id="DataTables_Table_1_info"></div>
      	<style type="text/css">
			#pages li{
				background-color: #444444;
			    border-left: 1px solid rgba(255, 255, 255, 0.15);
			    border-right: 1px solid rgba(0, 0, 0, 0.5);
			    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
			    color: #fff;
			    cursor: pointer;
			    display: block;
			    float: left;
			    font-size: 12px;
			    height: 20px;
			    line-height: 20px;
			    outline: medium none;
			    padding: 0 10px;
			    text-align: center;
			    text-decoration: none;
			}

			#pages li a{
				color:white;
			}

			#pages .active 
			{
				background-color: #88a9eb;
			}
			#pages .active  span
			{
			    color: #323232;
			}

			#pages .disabled
			{
				background-color: #444444;
			    border-left: 1px solid rgba(255, 255, 255, 0.15);
			    border-right: 1px solid rgba(0, 0, 0, 0.5);
			    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
			    color: #fff;
			    cursor: pointer;
			    display: block;
			    float: left;
			    font-size: 12px;
			    height: 20px;
			    line-height: 20px;
			    outline: medium none;
			    padding: 0 10px;
			    text-align: center;
			    text-decoration: none;
			    color: #666666;
   			 	cursor: default;
			}

			#pages{
				height:auto;
				overflow:hidden;
				padding:0px;
				margin:0px;
			}
			#pages ul
			{
				padding-left:3px;
				margin:0px;
			}
      	</style>
      <div style="padding-left:0px;margin-left:0px;" class="dataTables_paginate paging_full_numbers" id="DataTables_Table_1_paginate">
     
    </div>


  </div>
</div>
@endsection

@section('css')
	<link rel="stylesheet" type="text/css" href="/webadmin/plugins/colorpicker/colorpicker.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/webadmin/custom-plugins/picklist/picklist.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/webadmin/plugins/select2/select2.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/webadmin/plugins/ibutton/jquery.ibutton.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/webadmin/plugins/cleditor/jquery.cleditor.css" media="screen">

	<!-- Required Stylesheets -->
	<link rel="stylesheet" type="text/css" href="/webadmin/bootstrap/css/bootstrap.min.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/webadmin/css/fonts/ptsans/stylesheet.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/webadmin/css/fonts/icomoon/style.css" media="screen">

	<link rel="stylesheet" type="text/css" href="/webadmin/css/mws-style.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/webadmin/css/icons/icol16.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/webadmin/css/icons/icol32.css" media="screen">

	<!-- Demo Stylesheet -->
	<link rel="stylesheet" type="text/css" href="/webadmin/css/demo.css" media="screen">

	<!-- jQuery-UI Stylesheet -->
	<link rel="stylesheet" type="text/css" href="/webadmin/jui/css/jquery.ui.all.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/webadmin/jui/jquery-ui.custom.css" media="screen">

	<!-- Theme Stylesheet -->
	<link rel="stylesheet" type="text/css" href="/webadmin/css/mws-theme.css" media="screen">
	<link rel="stylesheet" type="text/css" href="/webadmin/css/themer.css" media="screen">
@endsection

@section('js')
	<script src="/webadmin/js/libs/jquery-1.8.3.min.js"></script>
    <script src="/webadmin/js/libs/jquery.mousewheel.min.js"></script>
    <script src="/webadmin/js/libs/jquery.placeholder.min.js"></script>
    <script src="/webadmin/custom-plugins/fileinput.js"></script>
    
    <!-- jQuery-UI Dependent Scripts -->
    <script src="/webadmin/jui/js/jquery-ui-1.9.2.min.js"></script>
    <script src="/webadmin/jui/jquery-ui.custom.min.js"></script>
    <script src="/webadmin/jui/js/jquery.ui.touch-punch.js"></script>

    <script src="/webadmin/jui/js/globalize/globalize.js"></script>
    <script src="/webadmin/jui/js/globalize/cultures/globalize.culture.en-US.js"></script>

    <!-- Plugin Scripts -->
    <script src="/webadmin/custom-plugins/picklist/picklist.min.js"></script>
    <script src="/webadmin/plugins/autosize/jquery.autosize.min.js"></script>
    <script src="/webadmin/plugins/select2/select2.min.js"></script>
    <script src="/webadmin/plugins/colorpicker/colorpicker-min.js"></script>
    <script src="/webadmin/plugins/validate/jquery.validate-min.js"></script>
    <script src="/webadmin/plugins/ibutton/jquery.ibutton.min.js"></script>
    <script src="/webadmin/plugins/cleditor/jquery.cleditor.min.js"></script>
    <script src="/webadmin/plugins/cleditor/jquery.cleditor.table.min.js"></script>
    <script src="/webadmin/plugins/cleditor/jquery.cleditor.xhtml.min.js"></script>
    <script src="/webadmin/plugins/cleditor/jquery.cleditor.icon.min.js"></script>

    <!-- Core Script -->
    <script src="/webadmin/bootstrap/js/bootstrap.min.js"></script>
    <script src="/webadmin/js/core/mws.js"></script>

    <!-- Themer Script (Remove if not needed) -->
    <script src="/webadmin/js/core/themer.js"></script>

    <!-- Demo Scripts (remove if not needed) -->
    <script src="/webadmin/js/demo/demo.formelements.js"></script>
@endsection

@section('myJs')
<script type="text/javascript">
$(function(){
	//给状态切换按钮绑定事件
	$('.ibutton-container').click(function(){
		//找到当前的元素中的input元素,获取当前元素的状态
		var status = $(this).find('input')[0].checked ? 1 : 0;
		//找id参数
		// var id = $(this).parents('tr').find('td:first').html();
		var id = $(this).find('input').attr('uid');
		//发送ajax请求
		$.get('/cate/aupdate', {'status':status,'id':id}, function(data){
			if(data == 1) {
				success('更新成功');
			}else{
				error('更新失败');
			}
		});
	})

	function success(str)
	{
		//将字符串放置到div中
		$('.success').html(str);
		//显示元素
		$('.success').show();
		setTimeout(function(){
			$('.success').fadeOut();
		}, 3000);
	}

	function error(str)
	{
		//将字符串放置到div中
		$('.error').html(str);
		//显示元素
		$('.error').show();
		setTimeout(function(){
			$('.error').fadeOut();
		}, 3000);
	}


})

</script>
@endsection